import React, { useState } from 'react'
import { Link, useLocation } from 'react-router-dom';
import { NavBar, Icon } from 'antd-mobile';
import '../Nav/index.css'


export default () => {
  const [urls] = useState(useLocation().pathname.split('/')[1])
  const limemos = (val) => val === urls ? 'selected' : ''

  return (
    <NavBar
      mode="light"
      icon={<Icon type="left" className="icon-left" />}
      onLeftClick={() => console.log('onLeftClick')}
      rightContent={[<Icon key="0" type="search" style={{ marginRight: '3px' }} />]}
    >
      <div className="header" >
        <Link to="/find" className={limemos('find')}>发现</Link>
        <Link to="/square" className={limemos('square')}>云村</Link>
        <Link to="/video" className={limemos('video')}>视频</Link>
      </div>
    </NavBar>
  )
}